<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>OneLove</title>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href='../styles/sass/style.css' rel='stylesheet'/>
    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" ></script>
		<link rel="stylesheet" href="tinyeditor.css">
    <script src="../js/tiny.editor.packed.js"></script>
     <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
	<script src="http://vjs.zencdn.net/c/video.js"></script>
	 <script src="http://www.kelvinluck.com/assets/jquery/jScrollPane/scripts/jScrollPane.js" type="text/javascript"></script>
    <script>
    	 $(document).ready(function () {
    	/*   var editor = new TINY.editor.edit('editor', {
	         id: 'tinyeditor',
	        width: 584,
	        height: 175,
	        cssclass: 'tinyeditor',
	        controlclass: 'tinyeditor-control',
	        rowclass: 'tinyeditor-header',
	        dividerclass: 'tinyeditor-divider',
	        controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
		'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
		'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
		'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
	        footer: true,
	        fonts: ['Verdana','Arial','Georgia','Trebuchet MS'],
	        xhtml: true,
	        cssfile: 'custom.css',
	        bodyid: 'editor',
	        footerclass: 'tinyeditor-footer',
	        toggle: {text: 'source', activetext: 'wysiwyg', cssclass: 'toggle'},
	        resize: {cssclass: 'resize'}
        });

        var editor1 = new TINY.editor.edit('editor', {
	        id: 'tinyeditor1',
	        width: 584,
	        height: 175,
	        cssclass: 'tinyeditor',
	        controlclass: 'tinyeditor-control',
	        rowclass: 'tinyeditor-header',
	        dividerclass: 'tinyeditor-divider',
	        controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
		'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
		'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
		'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
	        footer: true,
	        fonts: ['Verdana','Arial','Georgia','Trebuchet MS'],
	        xhtml: true,
	        cssfile: 'custom.css',
	        bodyid: 'editor',
	        footerclass: 'tinyeditor-footer',
	        toggle: {text: 'source', activetext: 'wysiwyg', cssclass: 'toggle'},
	        resize: {cssclass: 'resize'}
        });
    	     */
    	     
    	     new Swipe(document.getElementById('slider'));
    	      new Swipe(document.getElementById('slider2'));
    	      
    	      var slider3 = new Swipe(document.getElementById('slider3'));
    	      var slider4 = new Swipe(document.getElementById('slider4'));
    	      
    	      
    		$("input:radio[name=group1]").change( function() {
    	    $("#step2 .stepOptions").removeClass("hide");
    	   	$("#step2Complete").addClass("hide");
			  });
			
			 $("input:radio[name=group2]").change( function() {
    	   	$("#step2Complete").removeClass("hide");
			  });
			
			$("#step2Complete").click(function(){
			$("#AssessmentType").addClass("hide");
			$("#assessments").removeClass("hide");
    		});
    		
    		$(".addQuestion").click(function(){
    		var q=$('input[name=group4]:checked').val();
    		var a=$('input[name=group5]:checked').val();
    		
    	    if(q!=undefined && a!=undefined){
    		 	$("ul#addNew").append('<li>Question Type :'+q+'Answer Type: '+a+'</li>');
    		 	$("#step4Complete").removeClass("hide");
    		 	}
    		});
    		
    		$("#step3Back").click(function(){
    			$("#AssessmentType").removeClass("hide");
    			$("#assessments").addClass("hide");
        	});
    		
    		$("#step4Back").click(function(){
        		$("#assessments").removeClass("hide");
        		$("#actualQuestion").addClass("hide");
        	});
    		
    		$("#step4Complete").click(function(){
    		$("#assessments").addClass("hide");
    		  $("#actualQuestion").removeClass("hide");
    		});
    		
    		$(".contentRadio").click(function(){
	    		 		$("#contentText").removeClass("hide");
			});
			
			
			$(".QnARadio").click(function(){
	    		 		$("#QnAText").removeClass("hide");
			});
			
       	 });
    </script>

	</head>
	<body>
    <div class='nav'>
      <a href="dashboard.html"><div class='logo'></div></a>
      <ul class="utility_nav">
        <li>Welcome, User</li>
        <li>Sign Out</li>
      </ul>
    </div>
	
	
	  <div class="container" id="AssessmentType">
	   
	    <div class="steps" id="step1">
	      <h2>Create an Assessment</h2>
		    <ul class="stepOptions">
			    <li><input type="radio" name="group1"/>Guided Content</li> 
			    <li><input type="radio" name="group1"/>Assessment</li>
			    <div style="clear:both;"></div>
		    </ul>
		    <!--div id="step1Complete" class="btn pointer">Continue</div-->
	  </div>	
	
	
	  <div class="steps" id="step2">
	    <ul class="stepOptions hide">
	    <h2>Choose Content Type</h2>
			<li><input type="radio" name="group2" />
			  <img src="../styles/images/videoicon.png">
			  Video
			</li> 
			<li><input type="radio" name="group2"/>
			  <img src="../styles/images/galleryicon.png">
			  Image
			</li> 
			<li><input type="radio" name="group2" class="contentRadio"/> 
			  <img src="../styles/images/texticon.png">
			 <div id="contentText" class="hide" >
				<textarea id="tinyeditor1"></textarea> 
			 </div>
			</li>
			
			<div style="clear:both;"></div>
			<div id="step2Complete" class="btn pointer hide">Continue</div>
		  </ul>
		</div>
			
	</div>
	
	
	<div id="assessments" class="hide">
	<div id="step3Back" class="btn" style="float:left;background:#FFFFFF;">Back</div>
     <div style="clear:both;"></div>
		<div class="steps" id="step3">
			<ul class="stepOptions" id="addNew">
			<h2>Questions / Answers</h2>
				<li class="addQuestion">+ Add New</li>
				<div style="clear:both;"></div>
				<!--div id="step3Complete" class="btn pointer">Continue</div-->
			</ul>
		</div>	
	
	
		<div class="steps" id="step4">
			<ul class="stepOptions">
			<h2>Q&A Set</h2>
				<li>
				   <h3> Question </h3>
					 <ul class="assetType">
							<li><input type="radio" name="group4"/>
        			  <img src="../styles/images/videoicon.png">
        			  Video
        			</li> 
        			<li><input type="radio" name="group4"/>
        			  <img src="../styles/images/galleryicon.png">
        			  Image
        			</li> 
        			<li><input type="radio" name="group4"  class="QnARadio" /> 
        			  <img src="../styles/images/texticon.png">
        			  Text
        			  <div id="QnAText" class="hide">
								   <textarea id="tinyeditor"></textarea> 
							    </div>
        			  </li>
        			 </ul>
				</li>
			
				<li>
				  <h3> Answer </h3>
					<ul class="QnAType">
						<li> <input type="radio" name="group5" value="multiSelect"/> Multi Select</li>
						<li> <input type="radio" name="group5" value="singleSelect"/> Single Select </li>
						<li> <input type="radio" name="group5" value="openEnded"/> Open Ended Essay </li>
					</ul>
				</li>
				<div style="clear:both;"></div>
				<div id="step4Complete" class="btn pointer hide">Construct Assessment</div>
			</ul>
		</div>	
	</div>
	
	<div id="actualQuestion" class="hide">
	<div class="assessment">
	
     <div id="step4Back" class="btn" style="float:left;background:#FFFFFF;">Back</div>
     <div style="clear:both;"></div>
		<div class="container" id="stimulus">
		  <div class="instructions"> INSTRUCTIONS: Venture dream of the mind's eye a very small stage in a vast cosmic arena tendrils of gossamer clouds great turbulent clouds hundreds of thousands descended from astronomers with pretty stories for which there's little good evidence sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
		  <div class="scrollbar-container" id="content">
		    <div class="inner">  
		    	       <video id="my_video_1" class="video-js vjs-default-skin" controls
						  preload="auto" width="140" height="164" poster="my_video_poster.png"
						  data-setup="{}">
						  <source src="my_video.mp4" type='video/mp4'>
						  <source src="my_video.webm" type='video/webm'>
						</video>

		    </div>		
		  </div>
		</div>
	</div>
	
  <div class="container" id="response">
    <h2>Questions</h2>
    <div id='slider3' class='swipe'>
      <ul>
        <li>
          <div class="question"><h2>1. In a battle between Squirtle and Voltran, who would win and why?</h2><img src="http://www.entertainmentearth.com/images/AUTOIMAGES/TKM060lg.jpg"></div>
          <div class="answer">
            <ul class="multichoice">
              <li><input type="radio" name="group1" value="multiSelect"/>Squirtle, because his type is at an advantage</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Voltran, because her type is at an advantage</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Draw, there is an equal type advantage in this match up because of the subtypes</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Draw, there is no type advantage in this match up</li>
            </ul>
          </div>
        </li>
        <li>
          <div class="question"><h2>2. In a battle between Pikachu and Onyx, who would win and why?</h2></div>
          <div class="answer">
            <ul class="multichoice">
              <li><input type="radio" name="group1" value="multiSelect"/>Pikachu, because his type is at an advantage</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Onyx, because her type is at an advantage</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Draw, there is an equal type advantage in this match up because of the subtypes</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Draw, there is no type advantage in this match up</li>
            </ul>
          </div>
        </li>
        <li>
          <div class="question"><h2>3. In a battle between Jigglypuff and Jynx, who would win and why?</h2><img src="../images/jiggly_jynx.jpg"></div>
          <div class="answer">
            <ul class="multichoice">
              <li><input type="radio" name="group1" value="multiSelect"/>Jigglypuff, because his type is at an advantage</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Jynx, because her type is at an advantage</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Draw, these are the WORST pokemon</li>
              <li><input type="radio" name="group1" value="multiSelect"/>Draw, seriously why is that even happening</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>

    <script src='../js/swipe.min.js'></script>
    <script>
      new Swipe(document.getElementById('slider'));
      new Swipe(document.getElementById('slider2'));
      var slider3 = new Swipe(document.getElementById('slider3'));
      var slider4 = new Swipe(document.getElementById('slider4'));
    </script>
      <a href='#' onclick='slider3.prev();return false;'>prev</a> 
      <a href='#' onclick='slider3.next();return false;'>next</a>
      <a href='submit.html' class='btn'>Submit</a>
  </div>
	</div>
	
	
	
	
	
	
	</body>
</html>